<template>
  <el-dialog title="产品详情" v-model="state.dialog.isShowDialog" width="1200">
    <ProductList :product="state.productDetail" />
  </el-dialog>
</template>

<script setup lang="ts" name="productListDialog">
import { reactive } from 'vue';
import ProductList from './index.vue';

const state = reactive({
  productDetail: null,
  dialog: {
    isShowDialog: false,
  },
});

// 打开弹窗
const openDialog = (product?: any) => {
  state.productDetail = product;
  state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};

// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>

<style lang="scss" scoped>
.cell-item {
  display: flex;
  align-items: center;
}
</style>
